import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:kegelutils/controller_main.dart';
import 'package:kegelutils/dailogs.dart';
import 'package:kegelutils/state_player.dart';
import 'package:step_progress_indicator/step_progress_indicator.dart';

class PlanPage extends StatefulWidget {
  final int index;

  const PlanPage(this.index, {Key? key}) : super(key: key);

  @override
  State<PlanPage> createState() => _PlanPageState();
}

class _PlanPageState extends State<PlanPage> {
  //渐变效果设置
  late Gradient gradient;
  late Shader shader;

  @override
  void initState() {
    super.initState();
    gradient = const LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.purple,
      ],
    );
    shader = gradient.createShader(Rect.fromLTWH(
        0, 0, Get.mediaQuery.size.width, Get.mediaQuery.size.height));
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: buildBody(),
        ),
      ],
    );
  }

  Widget buildBody() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          flex: 1,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              buildTitle(),
              const SizedBox(height: 5.0),
              buildDesc(),
            ],
          ),
        ),
        Expanded(
          child: Center(
            child: SizedBox(
              width: Get.mediaQuery.size.width / 2,
              child: AspectRatio(
                aspectRatio: 1,
                child: Stack(
                  children: [
                    Positioned.fill(
                        child: AspectRatio(
                            aspectRatio: 1, child: buildProgressCircle())),
                    Positioned(
                      child: buildPlayIcon(),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
        Expanded(flex: 1, child: Container()),
      ],
    );
  }

  ///构建进度条
  Widget buildProgressCircle() {
    return Obx(() {
      int curIndex = MainController.to.curRunningIndex.value;
      int curStep = MainController.to.curStep.value;
      if (curIndex != widget.index) {
        curStep = 0;
      }
      return CircularStepProgressIndicator(
        totalSteps: MainController.to.curMaxStep.value,
        currentStep: curStep,
        stepSize: 5,
        selectedColor: Colors.greenAccent,
        unselectedColor: Colors.grey[200],
        padding: 0,
        width: 150,
        height: 150,
        selectedStepSize: 15,
        gradientColor: const LinearGradient(
          colors: [Colors.red, Colors.purple],
        ),
        roundedCap: (_, __) => true,
      );
    });
  }

  ///构建播放按钮
  Widget buildPlayIcon() {
    return Obx(() {
      ValueKey key;
      int curRunningIndex = MainController.to.curRunningIndex.value;
      PlayState state = MainController.to.state.value;
      key = ValueKey(state);
      Widget icon = Container(
        key: key,
        child: Center(
          child: Icon(
            Icons.play_arrow_rounded,
            size: Get.mediaQuery.size.width / 4,
            color: Colors.purple,
          ),
        ),
      );
      if (widget.index == curRunningIndex) {
        switch (state) {
          case PlayState.stopped:
          case PlayState.paused:
          case PlayState.completed:
            break;
          case PlayState.playing:
            icon = Container(
              key: key,
              child: Center(
                child: Icon(
                  Icons.pause_rounded,
                  size: Get.mediaQuery.size.width / 4,
                  color: Colors.redAccent,
                ),
              ),
            );
            break;
        }
      }
      return GestureDetector(
        onTap: () {
          if (curRunningIndex != MainController.INDEX_NO_CHECK_PLAN &&
              curRunningIndex != widget.index) {
            popChangePlanDialog(curRunningIndex);
          } else {
            switch (state) {
              case PlayState.stopped:
              case PlayState.paused:
              case PlayState.completed:
                MainController.to.play();
                break;
              case PlayState.playing:
                MainController.to.paused();
                break;
            }
          }
        },
        child: AnimatedSwitcher(
          duration: Duration(milliseconds: 200),
          transitionBuilder: (Widget child, Animation<double> animation) {
            return ScaleTransition(
              scale: animation,
              child: child,
            );
          },
          child: icon,
        ),
      );
    });
  }

  ///构建标题
  Widget buildTitle() {
    String? title;
    switch (widget.index) {
      case 0:
        title = '基础训练';
        break;
      case 1:
        title = '加速训练';
        break;
      case 2:
        title = '持久训练';
        break;
      case 3:
        title = '混合训练';
        break;
    }
    return Container(
      alignment: Alignment.center,
      child: Text(
        title!,
        style: TextStyle(
          fontSize: 30.0,
          color: Colors.black87,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }

  ///构建描述
  Widget buildDesc() {
    String? desc;
    switch (widget.index) {
      case 0:
        desc = '训练时长：10min\n';
        break;
      case 1:
        desc = '训练时长：8min\n';
        break;
      case 2:
        desc = '训练时长：6min\n';
        break;
      case 3:
        desc = '训练时长：6min\n';
        break;
    }
    return Container(
      child: Text(
        desc!,
        style: TextStyle(
          fontSize: 18.0,
          color: Colors.black87,
        ),
      ),
    );
  }
}
